<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>性能分析图</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <!-- <script src="./echarts.min.js"></script> -->
</head>

<body>
    <div id="main" style="width: 538px;height:230px;"></div>
    <!-- <div id="main" style="width: 538px;height:230px;"></div> -->

    <script type="text/javascript">
        function timeFormat (value) {
            // 获取当前刻度对应的时间
            var date = new Date(value);
            var hours = date.getHours();
            var minutes = date.getMinutes();
            return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);

        };

        function tran (value) {
            switch (value) {
                case 'shen':
                    return '深睡';
                case 'zhong':
                    return '中睡';
                case 'qian':
                    return '浅睡';
                case 'qing':
                    return '清醒';
                case 'li':
                    return '离床';
                default:
                    return '';
            }
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data = [
            {
                "name": "离床",
                "value": [
                    0,
                    1679474893000,
                    1679478193000,
                    3300000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#FFB665"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679478193000,
                    1679479813000,
                    1620000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679479813000,
                    1679479873000,
                    60000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679479873000,
                    1679482513000,
                    2640000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679482513000,
                    1679486173000,
                    3660000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "深睡",
                "value": [
                    4,
                    1679486173000,
                    1679487313000,
                    1140000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#676EFF"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679487313000,
                    1679488213000,
                    900000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679488213000,
                    1679488813000,
                    600000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "离床",
                "value": [
                    0,
                    1679488813000,
                    1679489833000,
                    1020000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#FFB665"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679489833000,
                    1679490433000,
                    600000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679490433000,
                    1679491153000,
                    720000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "深睡",
                "value": [
                    4,
                    1679491153000,
                    1679491633000,
                    480000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#676EFF"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679491633000,
                    1679494453000,
                    2820000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679494453000,
                    1679495233000,
                    780000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "离床",
                "value": [
                    0,
                    1679495233000,
                    1679496193000,
                    960000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#FFB665"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679496193000,
                    1679496853000,
                    660000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679496853000,
                    1679497753000,
                    900000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "深睡",
                "value": [
                    4,
                    1679497753000,
                    1679499673000,
                    1920000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#676EFF"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679499673000,
                    1679500573000,
                    900000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679500573000,
                    1679501533000,
                    960000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "离床",
                "value": [
                    0,
                    1679501533000,
                    1679503453000,
                    1920000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#FFB665"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679503453000,
                    1679504053000,
                    600000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679504053000,
                    1679505913000,
                    1860000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679505913000,
                    1679506513000,
                    600000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "离床",
                "value": [
                    0,
                    1679506513000,
                    1679507713000,
                    1200000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#FFB665"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679507713000,
                    1679508433000,
                    720000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679508433000,
                    1679509213000,
                    780000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679509213000,
                    1679509873000,
                    660000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "离床",
                "value": [
                    0,
                    1679509873000,
                    1679511013000,
                    1140000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#FFB665"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679511013000,
                    1679511733000,
                    720000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679511733000,
                    1679512873000,
                    1140000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "深睡",
                "value": [
                    4,
                    1679512873000,
                    1679517193000,
                    4320000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#676EFF"
                    }
                }
            },
            {
                "name": "中睡",
                "value": [
                    3,
                    1679517193000,
                    1679517853000,
                    660000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#30C0FF"
                    }
                }
            },
            {
                "name": "浅睡",
                "value": [
                    2,
                    1679517853000,
                    1679518093000,
                    240000
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00E3CA"
                    }
                }
            }
        ]
        // var data = [];
        var dataCount = 10;
        var startTime = +new Date(); // 开始时间，时间戳
        var categories = ['离床', '清醒', '浅睡', '中睡', '深睡'];  // 分类
        // 数据类型的颜色
        var types = [
            { name: '深睡', color: '#FFB665' },
            { name: '中睡', color: '#A9F1A6' },
            { name: '浅睡', color: '#00E3CA' },
            { name: '清醒', color: '#30C0FF' },
            { name: '离床', color: '#676EFF' },
        ];

        const colors = {
            'shen': '#FFB665',
            'zhong': '#A9F1A6',
            'qian': '#00E3CA',
            'qing': '#30C0FF',
            'li': '#676EFF'
        };
        // 预先计算每个标签的颜色
        const labels = ['shen', 'zhong', 'qian', 'qing', 'li'];
        const labelColors = labels.reduce((acc, label) => {
            acc[label] = {
                backgroundColor: colors[label],
                width: 10,
                height: 10,
                align: 'center',
                verticalAlign: 'middle'
            };
            return acc;
        }, {});

        startTime = 1679474893000
        // 生成模拟数据
        // categories.forEach(function (category, index) {
        //     var baseTime = startTime;   // 开始
        //     // console.log(category, index) // 离床 0
        //     for (var i = 0; i < dataCount; i++) { // 每次生成10个数据
        //         var typeItem = types[Math.round(Math.random() * (types.length - 1))]; // 在types随机
        //         // console.log(typeItem)
        //         var duration = Math.round(Math.random() * 10000); // 在随机时间
        //         //    console.log(duration)
        //         data.push({
        //             name: typeItem.name,
        //             value: [index, baseTime, (baseTime += duration), duration],
        //             itemStyle: {
        //                 normal: {
        //                     color: typeItem.color
        //                 }
        //             }
        //         });
        //         // console.log(data)
        //         baseTime += Math.round(Math.random() * 2000);
        //         // console.log(baseTime)
        //     }
        // });
        console.log(data) // 50条数据
        // 数据机构为：data [{"name": "浅睡","value": [0,1730632107620,1730632111353,3733],"itemStyle": {"normal": {"color": "#00E3CA"}}}]
        function renderItem (params, api) {
            // console.log('参数',params)
            // console.log('api',api)
            var categoryIndex = api.value(0);  // y轴上的索引
            // console.log(categoryIndex)
            var start = api.coord([api.value(1), categoryIndex]); // 计算起始点坐标
            // console.log('开始---',start)
            var end = api.coord([api.value(2), categoryIndex]);  // 计算结束点坐标
            // console.log(api.value(2))
            // console.log('结束---',end)
            var height = api.size([0, 1])[1];  // 每个小举行快的高度
            // console.log('高度',height)
            var rectShape = echarts.graphic.clipRectByRect(
                {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                },
                {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }
            );
            return (
                rectShape && {
                    type: 'rect', // 矩形
                    transition: ['shape'], // 平滑变化
                    shape: rectShape, //  设置矩形的形状
                    style: api.style() //  设置图形的样式
                }
            );
        }
        option = {
            // tooltip: {
            //     trigger: 'axis',
            //     formatter: function (params) {
            //         var time = new Date(params[0].value[1]);
            //         return params[0].marker + params[0].name + ': ' + time + ' (' + time/1000/60 + ' 分钟)';
            //     }
            // },
            tooltip: {
                formatter: function (params) {
                    return params.marker + params.name + ': ' + params.value[3] / 1000 / 60 + '分钟' + '<br />' + '--开始' + ': ' + timeFormat(params.value[1]) + '<br />' + '--结束' + ': ' + timeFormat(params.value[2]);
                }
            },
            // title: {
            //     text: 'Profile',
            //     left: 'center'
            // },
            dataZoom: [
                {
                    type: 'slider',
                    filterMode: 'weakFilter',
                    showDataShadow: false,
                    top: 400,
                    labelFormatter: ''
                },
                {
                    type: 'inside',
                    filterMode: 'weakFilter'
                }
            ],
            grid: {
                // height: 300
                left: -30,
                right: 40,
                top: 0,
                bottom: 0,
                containLabel: true
            },
            xAxis: {
                type: 'time',
                min: startTime,
                // min: '2023-03-22 16:48:13', // 设置最小值
                // max: '2023-03-23 04:48:13',  // 设置最大值
                scale: true,
                // axisLabel: {
                //     formatter: function (val) {
                //         return Math.max(0, val - startTime) + ' ms';
                //     }
                // },
                axisLabel: {
                    formatter: function (value, index) {
                        // 获取当前刻度对应的时间
                        var date = new Date(value);
                        var hours = date.getHours();
                        var minutes = date.getMinutes();
                        // if (index == 0) {
                        //     // 格式化时间
                        //     return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);
                        // }
                        return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);

                    },
                    showMinLabel: true, // 显示最小值标签
                    showMaxLabel: true,  // 显示最大值标签
                    textStyle: { // 设置字体样式
                        fontSize: 22, // 字体大小
                        color: '#999999' // 字体颜色
                    },
                    // rotate: 45, // 旋转标签
                    interval: 0, // 自动调整标签间隔
                    hideOverlap: true // 自动隐藏重叠的标签
                },
                splitLine: {
                    show: false, // 显示分割线
                    interval: Infinity, // 只显示开始和结束的分割线
                    lineStyle: {
                        color: '#ccc', // 分割线颜色
                        type: 'dashed' // 分割线类型
                    }
                }
            },
            yAxis: {
                data: labels,
                inverse: true, // 倒着排序
                axisLine: {
                    show: false // 隐藏 Y 轴的轴线
                },
                axisLabel: {
                    formatter: function (value) {
                        let ff = '{' + value + '|' + '}' + '{' + 'a' + '|' + tran(value) + '}';
                        console.log(ff);
                        return '{' + value + '|' + '}' + '{' + 'a' + '|' + tran(value) + '}';
                    },
                    rich: {
                        ...labelColors,
                        a: {
                            color: '#606364',
                            fontSize: 20,
                            align: 'center',
                            padding: [0, 0, 0, 8],
                            verticalAlign: 'middle'
                        }
                    },
                    margin: 40,    // 刻度标签与刻度线的距离
                    align: 'center' // 刻度标签水平居中对齐
                },
                axisTick: {
                    inside: true,
                    alignWithLabel: true, // 刻度线与刻度标签对齐
                    length: 700,             // 刻度线长度
                    lineStyle: {
                        type: 'dashed', // 虚线
                        color: '#ccc', // 刻度线颜色
                        // z:10000000
                    },
                },
                splitLine: {
                    show: false // 不显示分割线
                    // show: true, // 显示分割线
                    // lineStyle: {
                    //     color: '#000', // 分割线颜色
                    //     type: 'solid', // 分割线类型
                    //     width: 1       // 分割线宽度
                    // }
                }

            },
            series: [
                {
                    type: 'custom',
                    renderItem: renderItem,
                    itemStyle: {
                        opacity: 1
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data: data,
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>